<%--
  Created by IntelliJ IDEA.
  User: 21933
  Date: 2021/2/21
  Time: 14:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <style>
        body{
            background-image:url("../image/book.jpg");
            background-repeat: no-repeat;
            background-size: 1600px 800px;
        }
        .login_pictures_txt {
            opacity: 0.7;
            margin-top: 115px;
            margin-left: 493px;
            font-family:华光淡古印_CNKI ;
            width: 250px;
            color: #2B66A5;
            font-size: 20px;
            font-weight: normal;
            line-height: 46px;
            float: left;
        }
        #login{
            /*background: antiquewhite;*/
            opacity: 0.9;
            margin-right: 364px;
            margin-top: 230px;
            width: 397px;
            height: 518px;
            float: right;
            font-family:华光淡古印_CNKI ;
        }
        label{
            color: #666666;
        }
        #login input{
            width: 200px;
        }
        a{
            color: #eb7350;
        }
    </style>
</head>
<body>
<div class="login_pictures_txt" style="margin-top: 215px;">
    <p class="login_pictures_title">简单爱你心所爱</p>
    <p>世界也变的大了起来</p>
    <p>所有花都为你开</p>
    <p>所有景物也为了你安排</p>
    <p>我们是如此的不同</p>
    <p>肯定前世就已经深爱过</p>
    <p>讲好了这一辈子</p>
    <p>再度重相逢</p>
    <p class="login_pictures_info">摘自《再度重相逢》</p>
</div>

<div id="login" >
    <div id="dform">
        <form class="layui-form" id="formdata">
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" id="username" name="username" lay-verify="required|username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" id="pword" name="password" lay-verify="required|pass" autocomplete="off" placeholder="请输入密码(至少六位)" class="layui-input">
                    </div>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input id="phoneNumber" type="tel" name="phone" placeholder="请输入手机号" lay-verify="required|phone" autocomplete="off" class="layui-input">
                        <input id="authcode" class="layui-btn layui-btn-sm" value="获取验证码"></input>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-block">
                        <input id="authcodeR" type="text" name="authcodeR" lay-verify="required|number" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input id="sex" type="text" name="sex" placeholder="请输入性别" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-block">
                        <input id="date" type="date" name="birthday" id="date1" autocomplete="off" class="layui-input">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="submit" class="layui-btn" lay-submit lay-filter="btn" value="注册"></input>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    layui.use(['element','form','jquery','layer'],function () {
        var $ = layui.jquery;
        var element = layui.element;
        var layer = layui.layer;
        var form=layui.form;

        form.on('submit(btn)',function () {
            registers();
            return false;//阻止表单跳转
        });
            //点击注册
        function registers(){
            alert($("#formdata").serialize());
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/user/register',
                data:$("#formdata").serialize(),
                dataType:'json',
                success:function (breakdata) {
                    var code=breakdata.code;
                    var msg=breakdata.msg;
                    if (code==300){
                        layer.alert(msg, {icon: 5});
                    }else{
                        alert("登录成功，待跳转的页面");
                        window.location.href = "userlogin.jsp";
                    }
                }
            })
        }


        //获取验证码
        $("#authcode").click(function () {
            var phonenumber=$("#phoneNumber").val();
            alert(phonenumber);
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/sendMsg/duanxin',
                data:{
                    'phoneNumber':phonenumber
                },
                dataType:'json',
                success:function (breakdata) {
                    var code=breakdata.code;
                    alert(code);
                    var msg=breakdata.msg;
                    if(code==300){
                        layer.alert(msg, {icon: 5});
                    }else{
                        layer.alert(msg, {icon: 1});
                    }
                }
            })
        })
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }

                //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                if(value === 'xxx'){
                    alert('用户名不能为敏感词');
                    return true;
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });
    })
</script>
</html>
